<template>
	<view :class="['vip']">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap.stop='tool.back()'>
					<image src="../static/images/back.png" mode="widthFix"></image>
				</view>
				<view class="title dFlex jCenter_aCenter">
					<!-- <view :class="['menuOne',actMenu == '1'?'active':'']" @tap='changeMenu("1")'>
						<text>创始人</text>
						<view class="line"></view>
					</view> -->
				</view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class="container">
			<view class="pageBg imgPublic">
				<image src="https://wx.gdxixiashi.com/public/images/person/bj@2x.png?n=1" mode="widthFix"></image>
			</view>
			<view :class="['content',device == 'ios'?'iosPadding':'androidPadding']" >
				<view class="identify dFlex jCenter_aCenter">
					<view :class="['menuOne',actMenu == index ?'active':'']" v-for="(item,index) in list" :key='index' @tap='changeMenu(index)'>
						<text>{{item.content}}</text>
						<view class="line"></view>
					</view>
				</view>
				<view class="title">开通送{{list[sel].give_amount}}洗护券</view>
				<view class="vipKind">
					<swiper @change="changeCurrent" :current="sel" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="500" previous-margin='41px' next-margin='41px' :style='"height:"+swHeight+"px;"'>
						<swiper-item v-for="(item,index) in list" :key='index'>
							<view class="swiper-item">
								<view class="vipBg imgPublic">
									<image src="https://wx.gdxixiashi.com/public/images/person/vipBg@2x.png" mode="widthFix"></image>
								</view>
								<view class="vipContent dFlex flexDirection jCenter_aStart">
									<view class="tit">{{item.content}}</view>
									<view class="gift" v-if="item.give_amount > 0">赠送{{item.give_amount}}洗护券</view>
									<view class="time">终身有效</view>
								</view>
							</view>	
						</swiper-item>
					</swiper>
				</view>
				<view class="desc dFlex flexDirection jStart_aCenter">
					<!-- <view class="identify">{{list[sel].content}}</view> -->
					<view class="price">￥{{list[sel].price}}</view>
					<view class="oldPrice">原价￥{{list[sel].price2}}</view>
					<!-- <view class="have" @click='lookProtocol(sel)'>开通协议</view> -->
					<view class="gradeBtn" @tap.stop='tipsFlag = true'>
						<view class="btnImg imgPublic">
							<image src="https://wx.gdxixiashi.com/public/images/person/but2@2x.png" mode='widthFix'></image>
						</view>
						<view class="btnTxt dFlex jCenter_aCenter">
							立即开通
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zz dFlex jCenter_aEnd" v-if='tipsFlag'>
			<view class="step">
				<view class="tips">请先阅读并同意相关协议</view>
				<view class='xieyi' @click='lookProtocol(sel,list[sel].id)'>{{list[sel].content+'开通协议'}}</view>
				<view class="btns">
					<view class="btn agree" @click='getVIP'>同意并继续</view>
					<view class="btn" @click='tipsFlag = false'>取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actMenu:'0',
				device:getApp().globalData.platform,
				swHeight:'',
				list:[{'content':'云店','give_amount':0,'price':0}],
				sel:0,
				datas:{},
				tipsFlag:false,
				is_show_pay:2,
			};
		},
		onLoad(e) {
			if(e.id){
				this.actMenu = e.id;
				this.sel = e.id;
			}
			console.log(666);
			console.log(e.id);
			uni.getImageInfo({
				src:'https://wx.gdxixiashi.com/public/images/person/vipBg@2x.png',
				success: (info) => {
					console.log(info);
					this.swHeight = uni.getSystemInfoSync().windowWidth * 0.95 / (info.width / info.height);
				}
			})
		},
		onShow(){
			this.initData();
			this.initUserInfo();
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods: {
			// 查看开通协议
			lookProtocol(idx,id){
				this.tipsFlag = false;
				uni.navigateTo({
					url:'/person/protocol?idx='+idx+'&id='+id+'&name='+this.list[this.sel].content,
				})
			},
			// 用户信息
			initUserInfo(){
				this.tool.getUserInfo().then(res=>{
					this.datas = res;
					this.is_show_pay = res.is_show_pay;
				}).catch(err=>{
					console.log(err);
				})
			},
			// 切换菜单
			changeMenu(idx) {
				this.actMenu = idx;
				this.sel = idx;
			},
			// 列表数据
			initData(){
				this.tool.getData('User/vipPrice',{
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
				}).then(res=>{
					console.log(res);
					if(res){
						this.list = res;
					}
				}).catch(err=>{
					console.log(err);
				})
				/* this.tool.getData('User/index',{
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
				}).then(res=>{
					console.log(res);
					if(res){
						this.is_show_pay = res.is_show_pay;
					}
				}).catch(err=>{
					console.log(err);
				}) */
			},
			// 充值VIP
			getVIP(){
				if(this.datas.area_id == '0'){
					uni.showModal({
						title:'开通提示',
						content:'开通'+this.list[this.sel].content+'至少添加一个收货地址，是否现在去添加？',
						success: (op) => {
							this.tipsFlag = false; 
							if(op.confirm){
								uni.navigateTo({
									url:'/kind/opAdd',
								})
							}
						},
						fail:(err)=>{
							console.log(err);
						}
					})
					return;
				}
				
				
				uni.showActionSheet({
					
					itemList :["余额","线下"],
					
					success: (op) => {
						
						if(op.tapIndex == 0){
							var pay_method = 1;
							uni.showModal({
								content:'您确认支付'+this.list[0].price+'洗护金升级云店',
								success: (op) => {
									if(op.confirm){
										this.tool.getData('User/vipPay',{
											id:this.list[this.sel].id,
											memberId:uni.getStorageSync('userId'),
											pay_method:pay_method,
										}).then(res=>{
											console.log(res);
											if(res){
												if(pay_method == '2' || pay_method == '4'){
													uni.requestPayment({
														provider:'wxpay',
														timeStamp:res.weixin.timeStamp,
														nonceStr:res.weixin.nonceStr,
														package:res.weixin.package,
														signType:res.weixin.signType,
														paySign:res.weixin.paySign,
														success: () => {
															uni.showToast({
																title:'支付成功',
																icon:"success"
															})
															setTimeout(()=>{
																uni.navigateBack({
																	delta:1
																})
															},1650)
														},
														fail:(err)=>{
															console.log(err);
															uni.showToast({
																title:'支付失败',
																icon:"none"
															})
														}
													})
												}else if(pay_method == '3'){
													uni.requestPayment({
														provider:'alipay',
														orderInfo:res.alipay,
														success: () => {
															uni.showToast({
																title:'支付成功',
																icon:"success"
															})
															setTimeout(()=>{
																uni.navigateBack({
																	delta:1
																})
															},1650)
														},
														fail:(err)=>{
															console.log(err);
															uni.showToast({
																title:'支付失败',
																icon:"none"
															})
														}
													})
												}else if(pay_method == '1'){
													if(res){
														uni.showToast({
															title:'开通成功',
															icon:"success"
														})
														setTimeout(()=>{
															uni.navigateBack({
																delta:1
															})
														},1650)
													}
													
												}
											}
										}).catch(err=>{
											console.log(err);
										})
									}
								},
								fail:(err)=>{
									
								}
							})
						}else if(op.tapIndex == 1){
							this.tipsFlag = false;
							uni.navigateTo({
								url:'/person/yunapply',
							})
							return;
						}
						
						
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			// 修改swiper
			changeCurrent(e){
				this.sel = e.detail.current;
				this.actMenu = e.detail.current;
			}
		},
	}
</script>

<style lang="scss">
	page{
		background: linear-gradient(to right,#181818,#0a0a0a);
	}
	.vip{
		.step{
			width: 100%;
			background: white;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			.btns{
				width:100%;
				border-top: 1px solid rgba(255, 255, 255, 0.1);
				.btn{
					width:100%;
					padding:10px 0;
					text-align: center;
					color:#666666;
				}
				.agree{
					color:#fa3534;
					border-bottom: 2px solid rgba(0, 0, 0, 0.1);
				}
			}
			.xieyi{
				width:100%;
				text-align: center;
				padding:15px;
				box-sizing: border-box;
			}
			.tips{
				padding:12px 0;
				text-align: center;
				font-size: 12px;
				color:#666666;
			}
		}
		.container{
			width: 100%;
			position: relative;
			.content{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				box-sizing: border-box;
				.desc{
					width: 90%;
					margin: 0 auto;
					.have{
						width: 90%;
						font-weight: bold;
						color: #CBA267;
						margin: 20px auto;
						font-size: 15px;
						text-align:center;
					}
					.gradeBtn{
						width: 100%;
						position: relative;
						margin-top: 30px;
						.btnTxt{
							width: 100%;
							height: 100%;
							text-align: center;
							font-size: 16px;
							color: #151515;
							position: absolute;
							top: 0;
							left: 0;
							font-weight: bold;
						}
					}
					
					.oldPrice{
						color: #CCCCCC;
						font-size: 16px;
						font-weight: bold;
						text-decoration: line-through;
					}
					.price{
						font-size: 36px;
						font-weight: bold;
						color: #FEE0BB;
						margin: 12px 0;
					}
					.identify{
						font-size: 16px;
						font-weight: bold;
						color: #FEE0BB;
					}
				}
				.vipKind{
					margin-top: 70px;
					width: 100%;
					.swiper-item{
						width: 95%;
						position: relative;
						.vipContent{
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							padding: 20px 30px 0 30px;
							box-sizing: border-box;
							.tit{
								font-size: 22px;
								color: #645041;
								font-weight: bold;
							}
							.time{
								color: #6C5330;
								font-size: 12px;
								margin-top: 20px;
							}
							.gift{
								font-size: 12px;
								color: #6C5330;
								margin-top: 5px;
							}
						}
					}
				}
				.title{
					width: 90%;
					padding: 30px 0 0;
					margin: 0 auto;
					color: #CBA267;
					/* background-image: -webkit-linear-gradient(to right,#CBA267,#EBD7C2);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent; */
					font-size: 30px;
					font-weight: 700;
					text-align: center;
				}
			}
		}
	}
	.ios_pageTitle,.and_pageTitle{
		.title{
			flex: 1;
		}
	}
	.menuOne{
		width: 30%;
		color: rgba(255, 255, 255, 0.6);
		font-size: 16px;
		text-align: center;
		.line{
			width: 24px;
			height: 3px;
			border-radius:10px;
			margin: 5px auto 0;
		}
	}
	.active{
		font-size: 18px;
		color: white;
		font-weight: bold;
		.line{
			background: white;
		}
	}
</style>
